<template>
	<view :class="{couponItem: true, aMShow: isShow}">
		<view :class="{ appintAlertContent: true, aCShow: isShow }">
			<view v-if="closeBtn" class="close-btn">
				<uni-icons type="close" size="48" color="#999"  @click="_closeBtnClose"></uni-icons>
			</view>
			<view v-if="list.length">
				<view style="margin: 0 30rpx 20rpx;" v-for="(item, index) in list" :key="index">
					<view class="coupon-item">
						<view class="coupon-money">
							<view class="nick">{{item.name}}</view>
							<view class="layof">￥{{item.faceValue}}</view>
							<view class="end_time">{{item.endTime}}前使用</view>
						</view>
						<view class="get-btn"
                              v-if="item.useConditionType == 'FULL_REDUCTION' && item.useConditionValue > money && !matched"
							  style="border: 0;color: #999;">不可用</view>
						<view class="get-btn" style="border: 0;color: #999;"
							  v-else-if="money < item.faceValue">
							不可用
						</view>
						<view class="shar-item-ckb" v-else-if="checkBox || matched">
							<radio-group @change="checkboxChange($event, item)">
								<label class="uni-list-cell uni-list-cell-pd">
									<radio :value="item.couponId" :checked="index == current" color="#6CB041"/>
								</label>
							</radio-group>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="text">没有可用优惠券</view>
			<view v-if="list.length" class="btn" @tap="nonuseClick">不使用优惠券</view>
		</view>
	</view>
</template>
<script>
	import uniIcons from '../uni-icons/uni-icons'

	export default {
		components: {
            uniIcons
		},
		props: {
            isShow: {
                type: Boolean,
                default: false
            },
            closeBtn: {
                type: Boolean,
                default: true
            },
            theme: {
                type: String,
                default: '#FF4A26'
            },
            list: {
                type: Array,
                default: []
            },
            money: {
                type: String/Number
			},
            businId: {
                type: String/Number/Array
			}
		},
		data() {
			return {
                item: {},
                current: null,
                checkBox: true,
                matched: ''
			}
		},
		create() {},
		onLoad() {
            this.list.forEach((item, index) => {
                this.matched = item.bindShopIds.find((value) => {
                    return value == this.businId
                })
            })
		},
		methods: {
            _closeBtnClose() {
                /*let { closeBtn } = this;
                closeBtn && this._closeAlert();*/
                this.$emit('closeBtnClose');
            },
            checkSelect(item) {
                this._closeAlert(item)
            },
            _closeAlert(data = '') {
                this.$emit('closeAlert', data);
            },
            checkboxChange(e, item) {
                this.$emit('closeAlert', item);
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].couponId == e.detail.value) {
                        this.current = i;
                        break;
                    }
                }
			},
            nonuseClick() {
                this.current = null
                let from = {
                    bindShopIds: '',
                    couponId: '',
                    endTime: '',
                    faceValue: 0,
                    name: '不使用优惠券',
                    startTime: '',
                    status: '',
                    useConditionType: '',
                    useConditionValue: '',
				}
                this.$emit('closeAlert', from);
			}
		}
	}
</script>
<style lang="scss" scoped>
	$font-sm:26upx;
	$font-color-999:#999999;
	$bgcolor_white:#ffffff;
.couponItem {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: -9999;
	opacity: 0;
	transition: opacity 0.3s;
}
.aMShow {
	z-index: 999;
	opacity: 1;
}
.appintAlertMask view {
	box-sizing: border-box;
}
.appintAlertContent {
	height: 0rpx;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20rpx 0 84rpx;
	transition: height 0.5s;
}
.aCShow {
	overflow: auto;
	max-height: 70vh;
	min-height: 50vh;
	border-radius: 20rpx 20rpx 0 0;
}
.close-btn {text-align: right;padding: 0 30rpx 20rpx;}
.text {text-align: center;color: #999;margin-top: 20%;}
.coupon-item {
	width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; border:1px solid #eeeeee; position:relative;
	.coupon-money {
		width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;

		.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
		.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }

		.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
		.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
	}
	.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
}
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
	.shar-item-ckb {
		width: 54rpx;
		height: 54rpx;
		line-height: 1.1;
		border-radius: 50%;
		position:absolute; top:30%; right:60upx;
		padding: 4rpx;
	}
	.btn {
		position: fixed;width: 100%;text-align: center;background: #dd524d;color: #fff;bottom: 0;padding: 15rpx 0;
		font-size: 32rpx;
	}
</style>